<template>
  <div class="slider-assembly">
    <el-collapse v-model="activeNames">
      <el-collapse-item :title="items.title" :name="index + 1" v-for="(items, index) in moduleList" :key="index">
        <div
          class="list"
          :draggable="true"
          @dragstart="drag($event)"
          @dragend="dragEnd()"
          :data-name="item.name"
          v-for="(item, ind) in items.comList"
          :key="ind"
        >
          <i class="iconfont" :class="item.icon" />
          <p>{{ item.text }}</p>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup name="SliderAssembly">
import { ref, toRefs } from "vue";
import { useRoute } from "vue-router";

interface ComListItem {
  text: string;
  type: string;
  icon: string;
  name: string;
}
interface ComListContainer {
  title: string;
  comList: ComListItem[];
}

const props = defineProps({
  pointer: {
    type: Object
  }
});

const route = useRoute();
const { pointer } = toRefs(props);
const activeNames = ref([1, 2, 3]);
type ModuleList = ComListContainer[];
const moduleList: ModuleList = [
  {
    title: "基础组件",
    comList: [
      {
        icon: "icon-layoutmenu",
        type: "1-1",
        isShow: true,
        text: "图片轮播",
        name: "ImgSlide"
      },
      {
        icon: "icon-layoutmenu",
        type: "1-2",
        isShow: true,
        text: "图片",
        name: "ImgSingle"
      },
      {
        icon: "icon-layoutmenu",
        type: "1-3",
        isShow: true,
        text: "图片分组",
        name: "ImgWindow"
      },
      {
        icon: "icon-layoutmenu",
        type: "1-4",
        isShow: true,
        text: "视频组",
        name: "Videos"
      },
      {
        icon: "icon-layoutmenu",
        type: "1-5",
        isShow: true,
        text: "点餐模式",
        name: "OrderType"
      }
    ]
  },
  {
    title: "商城组件",
    isShow: route.query.pageCode === "mobile_food" ? false : true,
    comList: [
      { icon: "icon-layoutmenu", type: "2-1", isShow: true, text: "搜索框", name: "Search" },
      { icon: "icon-layoutmenu", type: "2-2", isShow: true, text: "公告组", name: "Notice" },
      { icon: "icon-layoutmenu", type: "2-3", isShow: true, text: "导航组", name: "NavBar" },
      { icon: "icon-layoutmenu", type: "2-4", isShow: true, text: "商品组", name: "Goods" },
      { icon: "icon-layoutmenu", type: "2-5", isShow: true, text: "商品选项卡", name: "GoodTabBar" },
      { icon: "icon-layoutmenu", type: "2-6", isShow: true, text: "团购", name: "GroupPurchase" },
      { icon: "icon-layoutmenu", type: "2-7", isShow: true, text: "秒杀", name: "Seckill" },
      { icon: "icon-layoutmenu", type: "2-8", isShow: true, text: "拼团", name: "PinTuan" },
      { icon: "icon-layoutmenu", type: "2-9", isShow: true, text: "优惠券", name: "Coupon" }
    ]
  },
  {
    title: "工具组件",
    isShow: true,
    comList: [
      { icon: "icon-layoutmenu", type: "3-1", isShow: true, text: "辅助空白", name: "Blank" },
      { icon: "icon-layoutmenu", type: "3-2", isShow: true, text: "文本域", name: "TextArea" },
      {
        icon: "icon-layoutmenu",
        type: "3-3",
        isShow: !route.query.pageCode == "mobile_food" ? false : true,
        text: "登录",
        name: "Login"
      }
    ]
  }
];

const drag = event => {
  pointer.value.show = true;
  event.dataTransfer.setData("componentName", event.target.dataset.name);
};

const dragEnd = () => {
  pointer.value.show = false;
};
</script>

<style lang="scss" scoped>
.slider-assembly {
  box-sizing: border-box;
  width: 275px;
  height: 100%;
  padding: 0 12px;
  overflow-y: scroll;
  background: #ffffff;
  border-right: 1px solid #ebedf0;

  /* 滚动条 */
  &::-webkit-scrollbar {
    width: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #155bd4;
  }
  .list {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 88px;
    margin-bottom: 8px;
    cursor: all-scroll;
    transition: all 0.3s;
    &:hover {
      font-weight: 700;
      background: var(--el-color-primary);
      border-radius: 2px;
      i,
      p,
      span {
        color: #ffffff;
      }
    }

    /* 图标 */
    i {
      width: 32px;
      height: 32px;
      margin-top: 4px;
      font-size: 32px;
      line-height: 32px;
      color: #b0a8a8;
    }

    /* 标题 */
    p {
      margin-top: 4px;
      font-size: 12px;
      color: #323233;
    }

    /* 数量 */
    span {
      margin-top: 4px;
      font-size: 10px;
      color: #7d7e80;
    }
  }
}
</style>
